<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树洞 - 发现真实的声音</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4F46E5;
            --primary-light: #EEF2FF;
            --secondary: #EC4899;
            --secondary-light: #FCE7F3;
            --dark: #1F2937;
            --light: #F9FAFB;
            --gray: #6B7280;
            --border: #E5E7EB;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F3F4F6;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            margin-left: 1rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 页面标题 */
        .page-header {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .page-description {
            color: var(--gray);
            font-size: 1.1rem;
        }
        
        /* 筛选区域样式 */
        .filters-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-title i {
            color: var(--primary);
        }
        
        .search-input-group {
            position: relative;
            max-width: 600px;
        }
        
        .search-input {
            padding-left: 2.5rem;
            border-radius: 8px;
            border: 1px solid var(--border);
        }
        
        .search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .filter-tag {
            padding: 0.4rem 1rem;
            background-color: var(--light);
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        
        .filter-tag:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
        }
        
        .filter-select {
            width: 100%;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            border: 1px solid var(--border);
            background-color: white;
        }
        
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .filter-btn {
            padding: 0.5rem 1.5rem;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .reset-btn {
            background-color: white;
            border: 1px solid var(--border);
            color: var(--dark);
        }
        
        .reset-btn:hover {
            background-color: var(--light);
        }
        
        .apply-btn {
            background-color: var(--primary);
            border: 1px solid var(--primary);
            color: white;
        }
        
        .apply-btn:hover {
            background-color: #4338CA;
        }
        
        .toggle-filters {
            display: none;
            background-color: white;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.75rem 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
            font-weight: 500;
            cursor: pointer;
        }
        
        /* 树洞卡片通用样式 */
        .post-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
            margin-bottom: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .post-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .post-header {
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-bottom: 1px solid var(--border);
        }
        
        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .post-meta {
            font-size: 0.8rem;
            color: var(--gray);
            display: flex;
            gap: 1rem;
        }
        
        .post-content {
            padding: 1.25rem;
            font-size: 1rem;
            line-height: 1.7;
        }
        
        .post-image {
            width: 100%;
            max-height: 300px;
            object-fit: cover;
        }
        
        .post-actions {
            padding: 0.75rem 1.25rem;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid var(--border);
            background-color: var(--light);
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--gray);
            background: none;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            color: var(--primary);
            background-color: rgba(79, 70, 229, 0.05);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        .action-btn.saved {
            color: var(--primary);
        }
        
        /* 布局切换按钮 */
        .layout-controls {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1.5rem;
            gap: 0.5rem;
        }
        
        .layout-btn {
            padding: 0.5rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            background-color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .layout-btn:hover, .layout-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 列表布局 */
        .list-layout {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        /* 网格布局 */
        .grid-layout {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        /* 加载更多按钮 */
        .load-more {
            display: block;
            margin: 2rem auto;
            padding: 0.75rem 2rem;
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .load-more:hover {
            background-color: var(--primary);
            color: white;
        }
        
        /* 浮动发布按钮 */
        .float-post-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
            border: none;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .float-post-btn:hover {
            transform: scale(1.1);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.5rem;
            }
            
            .toggle-filters {
                display: block;
            }
            
            .filters-container {
                display: none;
            }
            
            .filters-container.show {
                display: block;
            }
            
            .filter-actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">树洞</a>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-bell me-1"></i> 通知</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-user me-1"></i> 我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">树洞列表</h1>
            <p class="page-description">发现身边真实的声音和故事</p>
        </div>
        
        <!-- 筛选器切换按钮（移动端） -->
        <div class="toggle-filters" id="toggleFilters">
            <i class="fas fa-filter me-1"></i> 筛选条件
        </div>
        
        <!-- 筛选区域 -->
        <div class="filters-container" id="filtersContainer">
            <div class="row">
                <!-- 搜索框 -->
                <div class="col-md-12 filter-section">
                    <h5 class="filter-title"><i class="fas fa-search"></i> 关键词搜索</h5>
                    <div class="search-input-group">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="form-control search-input" placeholder="搜索树洞内容、标题或作者...">
                    </div>
                </div>
                
                <!-- 分类筛选 -->
                <div class="col-md-6 filter-section">
                    <h5 class="filter-title"><i class="fas fa-tags"></i> 内容分类</h5>
                    <div class="filter-tags">
                        <div class="filter-tag active">全部</div>
                        <div class="filter-tag">情感</div>
                        <div class="filter-tag">生活</div>
                        <div class="filter-tag">职场</div>
                        <div class="filter-tag">校园</div>
                        <div class="filter-tag">家庭</div>
                        <div class="filter-tag">兴趣</div>
                        <div class="filter-tag">思考</div>
                        <div class="filter-tag">秘密</div>
                        <div class="filter-tag">求助</div>
                    </div>
                </div>
                
                <!-- 内容类型筛选 -->
                <div class="col-md-6 filter-section">
                    <h5 class="filter-title"><i class="fas fa-image"></i> 内容类型</h5>
                    <div class="filter-tags">
                        <div class="filter-tag active">全部内容</div>
                        <div class="filter-tag">仅文字</div>
                        <div class="filter-tag">含图片</div>
                        <div class="filter-tag">热门讨论</div>
                    </div>
                </div>
                
                <!-- 时间筛选 -->
                <div class="col-md-6 filter-section">
                    <h5 class="filter-title"><i class="fas fa-clock"></i> 发布时间</h5>
                    <select class="filter-select">
                        <option value="all">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">近一周</option>
                        <option value="month">近一个月</option>
                        <option value="quarter">近三个月</option>
                        <option value="year">近一年</option>
                    </select>
                </div>
                
                <!-- 排序方式 -->
                <div class="col-md-6 filter-section">
                    <h5 class="filter-title"><i class="fas fa-sort"></i> 排序方式</h5>
                    <select class="filter-select">
                        <option value="recommend">推荐排序</option>
                        <option value="latest">最新发布</option>
                        <option value="hot">热门程度</option>
                        <option value="comments">评论最多</option>
                        <option value="views">浏览最多</option>
                    </select>
                </div>
                
                <!-- 热度筛选 -->
                <div class="col-md-12 filter-section">
                    <h5 class="filter-title"><i class="fas fa-fire"></i> 热度范围</h5>
                    <input type="range" min="0" max="100" value="50" class="form-range range-slider" id="heatRange">
                    <div class="range-labels">
                        <span>低热度</span>
                        <span>中等热度</span>
                        <span>高热度</span>
                    </div>
                </div>
                
                <!-- 筛选操作按钮 -->
                <div class="col-md-12 filter-actions">
                    <button class="filter-btn reset-btn" id="resetFilters">
                        <i class="fas fa-sync-alt me-1"></i> 重置筛选
                    </button>
                    <button class="filter-btn apply-btn" id="applyFilters">
                        <i class="fas fa-check me-1"></i> 应用筛选
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 布局切换控制 -->
        <div class="layout-controls">
            <button class="layout-btn active" id="listLayoutBtn" title="列表布局">
                <i class="fas fa-list"></i>
            </button>
            <button class="layout-btn" id="gridLayoutBtn" title="网格布局">
                <i class="fas fa-th"></i>
            </button>
        </div>
        
        <!-- 筛选结果统计 -->
        <div class="mb-3 text-muted">
            <i class="fas fa-filter me-1"></i> 找到 <strong>248</strong> 个符合条件的树洞
        </div>
        
        <!-- 树洞内容区 -->
        <div class="posts-container list-layout" id="postsContainer">
            <!-- 树洞1：文字类型 -->
            <div class="post-card">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">匿名用户753</div>
                        <div class="post-meta">
                            <span><i class="far fa-clock me-1"></i> 2小时前</span>
                            <span><i class="far fa-eye me-1"></i> 356</span>
                            <span><i class="fas fa-tag me-1"></i> 职场</span>
                        </div>
                    </div>
                </div>
                <div class="post-content">
                    今天终于鼓起勇气辞职了，虽然不知道未来会怎样，但至少摆脱了那个令人窒息的工作环境。每天加班到深夜，领导只会画饼，同事之间勾心斗角，感觉自己快要抑郁了。也许休息一段时间，重新思考一下自己真正想做什么会更好。有没有同样经历的人，能给我一点建议？
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>89</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>24</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 树洞2：带单张图片 -->
            <div class="post-card">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">星辰大海</div>
                        <div class="post-meta">
                            <span><i class="far fa-clock me-1"></i> 昨天 18:30</span>
                            <span><i class="far fa-eye me-1"></i> 1243</span>
                            <span><i class="fas fa-tag me-1"></i> 生活</span>
                        </div>
                    </div>
                </div>
                <div class="post-content">
                    周末去了郊外的湖边，没想到看到了这么美的日落。忙碌了一周，此刻终于可以静下心来，感受大自然的美好。有时候觉得，我们太容易被生活中的琐事困扰，而忽略了身边这些简单的幸福。
                </div>
                <img src="https://picsum.photos/800/500?random=10" alt="湖边日落" class="post-image">
                <div class="post-actions">
                    <button class="action-btn like-btn liked">
                        <i class="fas fa-heart"></i>
                        <span>327</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>46</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 树洞3：带多张图片 -->
            <div class="post-card">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">美食探险家</div>
                        <div class="post-meta">
                            <span><i class="far fa-clock me-1"></i> 3天前</span>
                            <span><i class="far fa-eye me-1"></i> 2156</span>
                            <span><i class="fas fa-tag me-1"></i> 兴趣</span>
                        </div>
                    </div>
                </div>
                <div class="post-content">
                    周末在家尝试做了三道新菜：番茄牛腩、香煎三文鱼和草莓慕斯。虽然过程有点手忙脚乱，但看到成品出来的那一刻真的很有成就感！味道居然还不错，看来我的厨艺有进步了，开心～
                </div>
                <div class="row g-1">
                    <div class="col-4">
                        <img src="https://picsum.photos/400/400?random=20" alt="番茄牛腩" class="post-image">
                    </div>
                    <div class="col-4">
                        <img src="https://picsum.photos/400/400?random=21" alt="香煎三文鱼" class="post-image">
                    </div>
                    <div class="col-4">
                        <img src="https://picsum.photos/400/400?random=22" alt="草莓慕斯" class="post-image">
                    </div>
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>542</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>89</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn saved">
                        <i class="fas fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
            
            <!-- 树洞4：热门讨论 -->
            <div class="post-card">
                <div class="post-header">
                    <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="author-avatar">
                    <div class="author-info">
                        <div class="author-name">深夜思考者</div>
                        <div class="post-meta">
                            <span><i class="far fa-clock me-1"></i> 1周前</span>
                            <span><i class="far fa-eye me-1"></i> 1876</span>
                            <span><i class="fas fa-tag me-1"></i> 思考</span>
                            <span class="text-secondary"><i class="fas fa-fire me-1"></i> 热门讨论</span>
                        </div>
                    </div>
                </div>
                <div class="post-content">
                    最近一直在思考人生的意义，可能是到了某个阶段都会有的困惑吧。我们每天努力工作，追求更好的生活，但到底什么才是真正重要的？是金钱、地位，还是家庭、健康，或者是内心的平静？

                    有时候觉得自己像个陀螺，不停地旋转，却不知道最终要去哪里。也许人生本没有固定的意义，意义是我们自己赋予的？

                    有没有人也有过类似的思考，想听听大家的想法。
                </div>
                <div class="post-actions">
                    <button class="action-btn like-btn">
                        <i class="far fa-heart"></i>
                        <span>432</span>
                    </button>
                    <button class="action-btn comment-btn">
                        <i class="far fa-comment"></i>
                        <span>156</span>
                    </button>
                    <button class="action-btn share-btn">
                        <i class="far fa-share-square"></i>
                        <span>分享</span>
                    </button>
                    <button class="action-btn save-btn">
                        <i class="far fa-bookmark"></i>
                        <span>收藏</span>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <button class="load-more" id="loadMore">加载更多</button>
    </div>
    
    <!-- 发布树洞浮动按钮 -->
    <button class="float-post-btn" title="发布新树洞">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 评论模态框 -->
    <div class="modal fade" id="commentModal" tabindex="-1" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commentModalLabel">评论区</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 评论输入框 -->
                    <div class="mb-4">
                        <textarea class="form-control" placeholder="写下你的评论..."></textarea>
                        <div class="d-flex justify-content-end mt-2">
                            <button class="btn btn-primary">发布评论</button>
                        </div>
                    </div>
                    
                    <!-- 评论列表 -->
                    <div class="comments-list">
                        <!-- 评论1 -->
                        <div class="comment-item mb-4 pb-4 border-bottom">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/100/100?random=60" alt="评论者头像" class="author-avatar">
                                <div class="flex-1">
                                    <div class="d-flex justify-content-between">
                                        <h6 class="author-name">阳光灿烂</h6>
                                        <span class="post-time">1天前</span>
                                    </div>
                                    <div class="comment-content mt-1">
                                        我也有过类似的经历，辞职后的那段时间虽然焦虑，但也让我有机会重新认识自己，找到真正适合的方向。相信你也能找到属于自己的道路！
                                    </div>
                                    <div class="comment-actions mt-2">
                                        <button class="action-btn like-btn">
                                            <i class="far fa-heart"></i>
                                            <span>15</span>
                                        </button>
                                        <button class="action-btn reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论2 -->
                        <div class="comment-item mb-4 pb-4 border-bottom">
                            <div class="d-flex gap-3">
                                <img src="https://picsum.photos/100/100?random=61" alt="评论者头像" class="author-avatar">
                                <div class="flex-1">
                                    <div class="d-flex justify-content-between">
                                        <h6 class="author-name">过来人</h6>
                                        <span class="post-time">2天前</span>
                                    </div>
                                    <div class="comment-content mt-1">
                                        建议先休息一两周调整状态，然后列出自己的优势和兴趣，再针对性地寻找机会。不要急于做出决定，给自己一些时间和空间。
                                    </div>
                                    <div class="comment-actions mt-2">
                                        <button class="action-btn like-btn liked">
                                            <i class="fas fa-heart"></i>
                                            <span>23</span>
                                        </button>
                                        <button class="action-btn reply-btn">
                                            <i class="far fa-reply"></i>
                                            <span>回复</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 筛选器切换（移动端）
        const toggleFiltersBtn = document.getElementById('toggleFilters');
        const filtersContainer = document.getElementById('filtersContainer');
        
        toggleFiltersBtn.addEventListener('click', function() {
            filtersContainer.classList.toggle('show');
        });
        
        // 布局切换功能
        const postsContainer = document.getElementById('postsContainer');
        const listLayoutBtn = document.getElementById('listLayoutBtn');
        const gridLayoutBtn = document.getElementById('gridLayoutBtn');
        
        // 列表布局
        listLayoutBtn.addEventListener('click', function() {
            postsContainer.className = 'posts-container list-layout';
            setActiveLayoutBtn(this);
        });
        
        // 网格布局
        gridLayoutBtn.addEventListener('click', function() {
            postsContainer.className = 'posts-container grid-layout';
            setActiveLayoutBtn(this);
        });
        
        // 设置活跃的布局按钮
        function setActiveLayoutBtn(btn) {
            document.querySelectorAll('.layout-btn').forEach(b => {
                b.classList.remove('active');
            });
            btn.classList.add('active');
        }
        
        // 筛选标签选择
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                // 如果是"全部"标签，取消同组其他标签的选中状态
                if (this.textContent.includes('全部')) {
                    const parent = this.parentElement;
                    parent.querySelectorAll('.filter-tag').forEach(t => {
                        t.classList.remove('active');
                    });
                    this.classList.add('active');
                } else {
                    // 取消同组"全部"标签的选中状态
                    const parent = this.parentElement;
                    parent.querySelectorAll('.filter-tag').forEach(t => {
                        if (t.textContent.includes('全部')) {
                            t.classList.remove('active');
                        }
                    });
                    // 切换当前标签状态
                    this.classList.toggle('active');
                }
            });
        });
        
        // 应用筛选
        document.getElementById('applyFilters').addEventListener('click', function() {
            // 显示加载状态
            postsContainer.innerHTML = '<div class="d-flex justify-content-center p-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>';
            
            // 模拟筛选请求延迟
            setTimeout(() => {
                // 筛选完成后恢复内容（实际应用中会根据筛选条件加载新内容）
                if (window.innerWidth < 768) {
                    filtersContainer.classList.remove('show');
                }
                
                // 更新结果统计（实际应用中会根据筛选结果更新）
                document.querySelector('.mb-3.text-muted strong').textContent = Math.floor(Math.random() * 200) + 50;
            }, 1000);
        });
        
        // 重置筛选
        document.getElementById('resetFilters').addEventListener('click', function() {
            // 重置所有筛选条件
            document.querySelector('.search-input').value = '';
            document.querySelectorAll('.filter-tag').forEach(tag => {
                tag.classList.remove('active');
                if (tag.textContent.includes('全部')) {
                    tag.classList.add('active');
                }
            });
            document.querySelectorAll('.filter-select').forEach(select => {
                select.selectedIndex = 0;
            });
            document.getElementById('heatRange').value = 50;
        });
        
        // 点赞功能
        document.querySelectorAll('.like-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                let count = parseInt(countElem.textContent);
                
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    countElem.textContent = count - 1;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    countElem.textContent = count + 1;
                }
            });
        });
        
        // 收藏功能
        document.querySelectorAll('.save-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (this.classList.contains('saved')) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                }
            });
        });
        
        // 评论功能 - 打开评论模态框
        document.querySelectorAll('.comment-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const commentModal = new bootstrap.Modal(document.getElementById('commentModal'));
                commentModal.show();
            });
        });
        
        // 分享功能
        document.querySelectorAll('.share-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                alert('分享功能：可以分享到微信、微博、QQ等平台');
            });
        });
        
        // 加载更多功能
        document.getElementById('loadMore').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            
            // 模拟加载延迟
            setTimeout(() => {
                // 复制现有树洞作为新内容（实际应用中会从服务器请求）
                const existingPosts = document.querySelectorAll('.post-card');
                const randomIndex = Math.floor(Math.random() * existingPosts.length);
                const clonedPost = existingPosts[randomIndex].cloneNode(true);
                
                // 修改一些内容以模拟新树洞
                const randomNum = Math.floor(Math.random() * 1000);
                clonedPost.querySelector('.author-avatar').src = `https://picsum.photos/100/100?random=${70 + randomNum}`;
                clonedPost.querySelector('.post-meta').innerHTML = `
                    <span><i class="far fa-clock me-1"></i> ${Math.floor(Math.random() * 7) + 1}天前</span>
                    <span><i class="far fa-eye me-1"></i> ${Math.floor(Math.random() * 3000)}</span>
                    <span><i class="fas fa-tag me-1"></i> ${getRandomCategory()}</span>
                `;
                
                // 重置交互状态
                clonedPost.querySelectorAll('.action-btn').forEach(btn => {
                    btn.classList.remove('liked', 'saved');
                    const icon = btn.querySelector('i');
                    if (icon.classList.contains('fas')) {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                });
                
                // 添加到容器
                postsContainer.appendChild(clonedPost);
                
                // 重新绑定事件
                bindEventsToNewPost(clonedPost);
                
                this.innerHTML = '加载更多';
            }, 1500);
        });
        
        // 获取随机分类
        function getRandomCategory() {
            const categories = ['情感', '生活', '职场', '校园', '家庭', '兴趣', '思考', '秘密', '求助'];
            return categories[Math.floor(Math.random() * categories.length)];
        }
        
        // 为新添加的树洞绑定事件
        function bindEventsToNewPost(post) {
            // 点赞
            post.querySelector('.like-btn').addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countElem = this.querySelector('span');
                let count = parseInt(countElem.textContent);
                
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    countElem.textContent = count - 1;
                } else {
                    this.classList.add('liked');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    countElem.textContent = count + 1;
                }
            });
            
            // 收藏
            post.querySelector('.save-btn').addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (this.classList.contains('saved')) {
                    this.classList.remove('saved');
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                } else {
                    this.classList.add('saved');
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                }
            });
            
            // 评论
            post.querySelector('.comment-btn').addEventListener('click', function() {
                const commentModal = new bootstrap.Modal(document.getElementById('commentModal'));
                commentModal.show();
            });
            
            // 分享
            post.querySelector('.share-btn').addEventListener('click', function() {
                alert('分享功能：可以分享到微信、微博、QQ等平台');
            });
        }
        
        // 发布新树洞按钮
        document.querySelector('.float-post-btn').addEventListener('click', function() {
            alert('打开发布树洞的表单');
        });
    </script>
</body>
</html>
    
